<!--
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title> New Document </title>
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <style type="text/css">
  #main{
  width:1000px;
  margin:0 auto;
  }
  #smallpic{
  height:120px; 
  }
  img{
  float:left; 
  margin-right:10px; 
  margin-bottom:10px;
  }
  #smallpic img:hover{
    cursor:pointer;
  }
  .pb {
    border:3px solid red;
  }
  </style>
 </head>

 <body>
 <div id="main">
  <div id="smallpic">
      <img src="./images/fruit1.png"  width="50" height="50" />
      <img src="./images/fruit1.png"  width="50" height="50"/>
      <img src="./images/fruit1.png"  width="50" height="50"/>
      <img src="./images/fruit1.png" width="50" height="50"/>
      <img src="./images/fruit1.png"  width="50" height="50"/>
      <div class="next">
      	<img src="./images/animal1.png" />
      </div>
  </div>
  <div>
      <img src="./images/animal2.png" id="bigpic"/></div>
  </div>
 </body>
 <script>
     var smallpic = document.getElementById("smallpic");
     var imgList = smallpic.getElementsByTagName("img");
     var bigpic = document.getElementById("bigpic");
     for(var i = 0; i < imgList.length; i++) {
         imgList[i].onclick = function() {
             for(var i = 0; i < imgList.length; i++) {
                 if(imgList[i].hasAttribute("class")) {
                    imgList[i].removeAttribute("class");
                 }
             }
             this.setAttribute("class", "pb");
             var imgSrc = this.getAttribute("src");
             bigpic.setAttribute("src", imgSrc);
             this.setAttribute("index", 1);
         }
     }
 </script>
</html>
-->
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>评分</title>
    <link rel="stylesheet" href="cssyle.css" />
</head>

<body>

</body>
<script>
    /*
        1、先得到要操作的网页元素的DOM对象
        img的DOM对象，textarea的DOM对象
        2、遍历图片的DOM对象集合，绑定事件，
        绑定鼠标移上的事件，鼠标移开的事件
        3、事件触发时，回调函数的执行
        鼠标移上时，判断当前移上的图片是第几个图片
        ，获取当前图片的title属性
        根据是第几张图，来决定如何切换图片，
        > 2  star2.png   < 2 star1.png

        第六章 BOM 复习
    */
   /**
    * 实现页面的动态效果
1.可以访问到要控制的元素
document.getElementById("id属性值");DOM对象
document.getElementsByTagName("标签名");DOM对象集合，实际访问要加索引
document.getElementsByClassName("class属性值");集合
2.通过节点间关系
node.parentNode(DOM对象)
node.children(DOM对象集合)
node.firstElementChild    
node.lastElementChild
node.nextElementSibiling
node.previousElementSibiling
3.考虑给合适的元素绑定事件
只能给DOM节点对象绑定事件
node.onclick = function(){}
node.onmouseover = function()
node.onfocus = function()
node.onblur = function()
node.onmouseout = function()
4.在事件的回调函数里，实际的完成操作过程
元素的标签中内容的操作 node.innerHTML  node.innerText
元素标签上属性的操作
node,setAttribute("属性名")
node.getAttribute("属性名","属性值")
node.hasAttribute("属性名")返回值是true/false
node.removeAttribute("属性名")移除特定属性

网页元素的增加 删除 修改
document.creatElement("标签名")
node.appendChild(child)
node.insertBefore(new,old)
node.replaceChild(new,old)
   */
</script>
<ml>